(function () {
    // 获取表单元素
    let form = document.getElementById("modalForm")
    // 添加事件
    form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }

        form.classList.add('was-validated')
    }, false)
})()

// 操作模态框，当前一个模态框应用新增和修改两种业务场景
// 页面启动会自动执行
$(function () {
    // 获取模态框，官方代码
    var exampleModal = document.getElementById('addAndUpdateModal')
    // 绑定一个模态框显示时的监听事件
    exampleModal.addEventListener('show.bs.modal', function (event) {
        // 获取按钮对象
        const button = event.relatedTarget
        // 获取自定义属性设置的数据（点击按钮绑定的用来区分当前是添加还是修改的标识）
        const btnType = button.getAttribute('button-type')
        // 直接将获取的标识数据作为模态框标题
        $('.modal-title').text(btnType)

        // 1. 如果是添加商品，需要移除隐藏域标签和记录gid的只读input标签
        if (btnType === "添加图书") {
            // 移除记录id的只读标签，因为添加时不需要id
            $(".idDiv input").remove()
            // // 清空表单数据
            $("#modalForm input[name='title']").val('')
            $("#modalForm input[name='author']").val('')
            $("#modalForm input[name='price']").val('')
            $("#modalForm input[name='stock']").val('')

            // 如果是添加就绑定action的属性值为 添加的接口
            $("#modalForm").attr("action","books/add")
        }

        // 2. 如果是修改商品，需要添加记录id的只读标签
        if (btnType === "修改图书") {
            // 条件的目的是防止元素重复添加
            if ($('.idDiv input').length === 0){
                // 添加id的只读标签
                $('.idDiv').append(`<input type='text' class='form-control' name='id' readonly />`)
            }

            // 回显数据
            // 根据按钮获取父标签(td),再获取所有兄弟标签(除了按钮所在的其他所有存数据的td)
            let tds = $(button).parent().siblings()
            console.log(tds)
            $("#modalForm input[name='id']").val(tds.eq(0).children().val())
            $("#modalForm input[name='title']").val(tds.eq(2).text())
            $("#modalForm input[name='author']").val(tds.eq(4).text())
            $("#modalForm input[name='price']").val(tds.eq(3).text())
            $("#modalForm input[name='stock']").val(tds.eq(6).text())

            // 如果是修改就绑定action的属性值为 修改的接口
            $("#modalForm").attr("action","books/update")
        }
    })
})

// 删除图书功能
function delBtn(bid){
    // 删除是需求提醒用户的操作
    if (confirm("你确定要删除当前行吗?")){
        // 执行删除动作
        location.assign("books/delete?bid="+bid);
    }
}

// 批量删除
function delAll() {
    // 获取当前要删除的ids
    // 1. 获取当前用户选中的所有的input
    let inputs = $(".table tbody input:checked")
    if (inputs.length === 0){
        alert("你还没有选中任何数据，请选择数据后再删除!")
        return;
    }
    // 遍历inputs，获取value中的 id，拼接为 bid=value&bid=value&bid=value
    let tdsParam = '';
    inputs.each(function (i,e) {
        tdsParam = tdsParam + "bid=" + $(e).val() + "&"
    })
    // 测试代码，控制台查看拼接结果
    console.log(tdsParam)
    // 发送请求
    if (confirm("确定要删除选中的这些行吗?")) {
        // 发送请求
        location.href = "books/delete?" + tdsParam;
    }
}

// 查询表单的清空按钮
function clearFormData(){
    // 直接不带任何参数发送请求，就会清空上次的所有记录的数据
    location.href = "bookManager.html";
}

// 上一页
function previous(){
    // 获取当前的page页
    let currentPage = [[${pageData.currentPage}]];
    // let currentPage = $(".pagination li[class*='active'] a").text()
    // console.log(currentPage)
    // 调用分页按钮的事件方法，将当前页 + 1 再赋值就可以实现查询
    pageBtn(currentPage - 1);
}

// 分页按钮的点击功能
function pageBtn(page){
    // 获取查询表单的数据，通过jQuery
    let formData = $("#searchForm").serialize()
    // 需要的表单数据时 key=value&key=value
    location.href = "bookManager.html?page=" + page + "&" + formData;
}

// 下一页
function next(){
    // 获取当前的page页
    let currentPage = [[${pageData.currentPage}]];
    // 调用分页按钮的事件方法，将当前页 + 1 再赋值就可以实现查询
    pageBtn(currentPage + 1);
}